<!--
 * @description: 
 * @Author: lhr
 * @Date: 2020-12-01 10:40:08
 * @LastEditors: lhr
 * @LastEditTime: 2020-12-02 14:57:31
-->
<template>
  <div>
    <div>
      <input type="text" v-model="todoValue" />
      <input type="button" @click="addTodo" value="添加" />
    </div>
    <p>共{{ total }}个任务</p>
    <ul>
      <li v-for="(item, index) in todoList" v-bind:key="index">
        <span>{{ item }}</span>
        <button type="button" @click="deleteItem(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todoValue: "",
      todoList: [],
    };
  },
  methods: {
    addTodo() {
      if (this.todoValue.trim().length === 0) {
        alert("请先输入内容");
        return;
      }
      this.todoList.push(this.todoValue);
      this.todoValue = "";
    },
    deleteItem(index) {
      this.todoList.splice(index, 1);
    },
    initList() {
      this.todoList = ["打扫卫生"];
    },
  },
  mounted() {
    this.initList();
  },
  computed: {
    total() {
      return this.todoList.length;
    },
  },
  watch: {
    total: function(oldVal, newVal) {
      console.log(oldVal, newVal);
    },
  },
};
</script>
